<!-- 输入框的内容 -->

<template>
  <div class="inputCommonContain">
    <div class="systemBtn">
      <el-button type="primary" size="mini" @click="sumbitClick">
        提 交
      </el-button>
    </div>
    <el-form ref="editFormRef" label-width="120px" size="mini" :inline="true" :model="editData">
      <el-form-item :label="item.title" v-for="(item, index) in editData.formParam" :key="item.paramName"
        :prop="'formParam.' + index + '.value'" :rules="editRules[item.paramName]" class="inputNull">
        <!-- 文本 -->
        <el-input v-if="item.type == 'text'" v-model="item.value" type="text" :disabled="!item.allow"
          :maxLength="item.maxLength"></el-input>
        <!-- 整数 -->
        <el-input v-else-if="item.type == 'int'" v-model="item.value" type="number" :disabled="!item.allow" min="0"
          :maxLength="item.maxLength"></el-input>
        <!-- 小数 -->
        <el-input v-else-if="item.type == 'float'" v-model="item.value" type="number" :disabled="!item.allow"
          :maxLength="item.maxLength"></el-input>
        <!-- 密码 -->
        <el-input v-else-if="item.type == 'password'" v-model="item.value" type="password" :disabled="!item.allow"
          :maxLength="item.maxLength"></el-input>

        <!-- 单选按钮 -->
        <el-checkbox v-else-if="item.type == 'radio'" v-model="item.value" true-label="1" false-label="2"></el-checkbox>

        <!-- 下拉选择器 -->
        <el-select v-else-if="item.type == 'select'" v-model="item.value">
          <el-option :label="item1.title" :value="item1.value" v-for="item1 in item.selectItems" :key="item1.title">
          </el-option>
        </el-select>

        <el-input class="inputNull" v-else-if="item.type == 'null'" v-model="item.value" disabled></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editRules: {},
    };
  },
  props: {
    editData: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    this.editRules = this.editData.editRules;
  },
  methods: {
    // 监听点击搜索的输入框
    basicSelectClick(val) {
      // console.log(val);
      // this.dataSelect = val;
      this.$emit("dataSelect", val);
    },

    // 提交input
    sumbitClick() {
      let editParams = {};
      editParams.id = JSON.parse(JSON.stringify(this.editData.id));
      editParams.groupId = JSON.parse(JSON.stringify(this.editData.groupId));
      this.editData.formParam.forEach((item) => {
        let key = JSON.parse(JSON.stringify(item.paramName));
        editParams[key] = JSON.parse(JSON.stringify(item.value));
      });
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) {
          return;
        }
        let {
          data: res
        } = await this.$http.post(
          "/api" + this.editData.submitUrl,
          editParams
        );
        if (res.result) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          // console.log(res);
          if (this.editData.submitUrl == "/addMenuItem")
            this.$emit("menuItemIdClick", res);
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.inputCommonContain {
  width: 100%;
  height: 100%;
}

.systemBtn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  box-sizing: border-box;
}
</style>
<style>
.searchForm .el-input--suffix .el-input__inner {
  padding-right: 50px;
}

/* 弹窗禁用输入框的样式 */
.inputCommonContain .inputNull .el-input.is-disabled .el-input__inner {
  color: blue !important;
  background-color: #f5f5f5 !important;
  font-size: 14px;
  font-weight: 700;
}

.inputCommonContain .el-form-item__content {
  width: 180px !important;
}
</style>